<template>
	<!-- 头部 -->

	<view class="slidey">
		<swiper class="swiper">
			
				
				<view v-for="(item,index) in categoryList" class="swiper-text" :class="test===index?'selectColor':''">
					<swiper-item class="ss"><text @click="selct(index)">{{item}}</text>	</swiper-item>
				</view>
		
		</swiper>
	</view>
	
	
	

</template>

<script>
	
	export default{
		data() {
				return {
					//左侧边栏的list
					categoryList: ['科目一', '科目四'],
					test: 0 //表示进入页面默认选中边栏的第一个标题
				}
			},
			methods: {
				selct(index) {
					//将选中的下标index传给test
					this.test = index
					uni.$emit("changeMenu",index)
				}
			},
		created() {
			uni.$on("change",current=>{
			//把传过来的current赋值给test，这样左边栏就会跟着右边内容的变化而变化
				this.test = current
			})
		},
		beforeDestroy() {//记得销毁监听器
			uni.$off("change")
		}
		
	}
	
</script>

<style>
	.selectColor {
		color: #007AFF;
		background-color: #ffffff;
	}
	
	.ss{
		display: flex;
		align-self: center;
	}
</style>
